<%--
    Document   : html-screen
    Created on : 28.03.2009, 14:22
    Author     : Aike J Sommer
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<f:view>
    <html>
        <head>
            <title>ViewNControl</title>
            <style type="text/css">
                body {
                    background-color: black;
                    margin: 0px;
                    padding: 0px;
                }

                img.slice {
                    position: absolute;
                    border: none;
                    margin: 0px;
                    padding: 0px;
                }

                div.layer {
                    position: absolute;
                    border: none;
                    margin: 0px;
                    padding: 0px;
                    width: 100%;
                    height: 100%;
                }

                div#input {
                    cursor: crosshair;
                }
            </style>
            <script type="text/javascript" src="/script/jquery.js"></script>
            <script type="text/javascript">
                var lastSlice = -1;
                var lastCursor = -1;
                var sessionKey = "<h:outputText value="#{screenView.key}" />";
                var currentBatch = 0;
                var currentBatchSize = 0;
                var fullUpdate = true;

                function checkForSlices() {
                    $.get("view", { 'result-type': "JSON", 'mode': 'CheckForSlices', 'since': lastSlice, 'full-update': fullUpdate }, function(data) {
                        var i;
                        for (i = 0; i < data.slices.slice.length; i++) {
                            var slice = data.slices.slice[i];
                            $("div#view").append("<img src=\"view?mode=FetchSlice&id=" + slice.id + "&key=" + sessionKey + "\" class=\"slice batch-" +
                                currentBatch + "\" " +
                                "style=\"top: " + slice.y + "px; left: " + slice.x + "px;\" _dbg=\"" + encodeURI(slice.debugInfo) + "\" />");
                            currentBatchSize++;
                            if (Number(slice.id) > lastSlice) {
                                lastSlice = Number(slice.id);
                            }
                        }

                        if (currentBatchSize > 250) {
                            $("img.batch-" + (currentBatch - 1)).remove();
                            fullUpdate = true;
                            currentBatch++;
                            currentBatchSize = 0;
                        }
                        setTimeout(checkForSlices, 100);
                    }, "json");
                    fullUpdate = false;
                }

                function checkForCursorUpdates() {
                    $.get("view", { 'result-type': "JSON", 'mode': 'CheckForCursorUpdates', 'since': lastCursor }, function(data) {
                        if (data.update.update) {
                            var slice = data.update.cursor;
                            if (data.update.shape) {
                                cursorOffsetX = slice.x;
                                cursorOffsetY = slice.y;
                                $("img#cursor").attr("src", "view?mode=FetchSlice&id=" + slice.id + "&key=" + sessionKey);
                                positionCursor();
                            } else {
                                cursorX = slice.x;
                                cursorY = slice.y;
                                positionCursor();
                            }
                            if (slice.id > lastCursor) {
                                lastCursor = slice.id;
                            }
                        }

                        setTimeout(checkForCursorUpdates, 20);
                    }, "json");
                }

                var cursorOffsetX = 0;
                var cursorOffsetY = 0;

                var cursorX = -1;
                var cursorY = -1;
                var movingCursor = false;

                var nextCursorX = -1;
                var netxCursorY = -1;

                function positionCursor() {
                    $("img#cursor").css("left", (cursorX - cursorOffsetX) + "px");
                    $("img#cursor").css("top", (cursorY - cursorOffsetY) + "px");
                }

                function cursorMoved(x, y) {
                    if (! movingCursor) {
                        movingCursor = true;
                        nextCursorX = -1;
                        nextCursorY = -1;
                    } else {
                        nextCursorX = x;
                        nextCursorY = y;
                    }

                    if (x != cursorX || y != cursorY) {
                        cursorX = x;
                        cursorY = y;

                        //console.log("cursor moved", x, y);
                        positionCursor();
                        $.get("view", { 'mode': 'UpdateCursor', 'x': x, 'y': y }, function () {
                            movingCursor = false;
                            if (nextCursorX >= 0 && nextCursorY >= 0) {
                                cursorMoved(nextCursorX, nextCursorY);
                            }
                        });
                    } else {
                        movingCursor = false;
                        if (nextCursorX >= 0 && nextCursorY >= 0) {
                            cursorMoved(nextCursorX, nextCursorY);
                        }
                    }
                }

                function buttonPressed(b) {
                    //console.log("button pressed", b);
                    $.get("view", { 'mode': 'UpdateCursor', 'pressed': b });
                }

                function buttonReleased(b) {
                    //console.log("button released", b);
                    $.get("view", { 'mode': 'UpdateCursor', 'released': b });
                }

                function keyPressed(k) {
                    //console.log("key pressed", k);
                    if (k > 0) {
                        $.get("view", { 'mode': 'UpdateKey', 'pressed': k });
                    }
                }

                /*function keyReleased(k) {
                    console.log("key released", k);
                    $.get("view", { 'mode': 'UpdateKey', 'released': k });
                }*/

                $(document).ready(function () {
                    checkForSlices();
                    checkForCursorUpdates();

                    $("div#input").mousemove(function (e) {
                        cursorMoved(e.pageX, e.pageY);
                    });
                    $("div#input").mousedown(function (e) {
                        buttonPressed(e.which);
                        return false;
                    });
                    $("div#input").mouseup(function (e) {
                        buttonReleased(e.which);
                        return false;
                    });
                    /*$("div#input").keydown(function (e) {
                        keyPressed(e.keyCode);
                        return false;
                    });*/
                    $("div#input").keypress(function (e) {
                        keyPressed(e.which);
                        return false;
                    });
                    $("div#input").blur(function (e) {
                        $("div#input").focus();
                    });
                    $("div#input").focus();
                });
            </script>
        </head>
        <body oncontextmenu="return false;">
            <div class="layer" id="view">
            </div>
            <div class="layer" id="devices">
                <img src="" id="cursor" class="slice" alt="" />
            </div>
            <div class="layer" id="input" tabindex="0">
            </div>
        </body>
    </html>
</f:view>
